<template>
	<view class="py-2">
		<u-upload
			:name="name"
			:accept="accept"
			:width="width"
			:height="height"
			:multiple="multiple"
			:maxCount="maxCount"
			:uploadText="tips"
			:maxSize="maxSize * 1024 * 1024"
			:fileList="fileList"
			:disabled="disabled"
			:deletable="!disabled"
			@afterRead="afterRead"
			@delete="deleteFile"
		>
		</u-upload>
		<view v-if="bottomTips && !disabled" class="u-info-disabled fz-12">
			{{ bottomTips }}
		</view>
	</view>
</template>

<script>
import uploadFile from "@/utils/obsutil/uploadFile";
import { getFilename } from "@/utils/common";

export default {
	props: {
		// 上传组件name,保持唯一性
		name: {
			type: String,
			required: true,
			default: "uploadName",
		},
		// 上传类型
		accept: {
			type: String,
			default: "image",
		},
		width: {
			type: Number,
			default: 100,
		},
		height: {
			type: Number,
			default: 100,
		},
		// 是否多选
		multiple: {
			type: Boolean,
			default: false,
		},
		// 最大选择图片的数量
		maxCount: {
			type: [String, Number],
			default: 1,
		},
		// 上传大小限制 M
		maxSize: {
			type: Number,
			default: 10,
		},
		tips: {
			type: String,
			default: "上传照片",
		},
		// 只支持.jpg.png 格式，400*400尺寸
		bottomTips: {
			type: String,
			default: "",
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false,
		},
		// 绑定值 多张为[url,url]
		modelValue: {
			type: [String, Array],
		},
	},
	data() {
		return {
			fileList: [],
		};
	},
	methods: {
		async afterRead(event) {
      const that = this;
			//  当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			const uploadedList = that.multiple ? event.file : [event.file];
			uploadedList.forEach((v) => {
        that.$set(v, 'name', getFilename(v.url, false))
				that.fileList.push({
					url: v.url,
          name: getFilename(v.url, false),
					status: "uploading",
					message: "上传中",
				});
			});

			for (let i = 0; i < uploadedList.length; i++) {
			  const url = await that.awaitUpFile(uploadedList[i].url);
			  // 上传成功后,替换上传列表中的临时路径已经更改上传状态
        const currentIndex = that.fileList.findIndex(v=> v.name === uploadedList[i].name);
			  that.fileList[currentIndex].url = url;
			  that.fileList[currentIndex].status = 'success';
			  that.fileList[currentIndex].message = '';
			}
			that.upDate(); // 更新绑定值
		},
		// 删除文件
		deleteFile(event) {
			this.fileList.splice(event.index, 1);
			this.upDate(); // 更新绑定值
		},
		upDate() {
			const successList = this.fileList.filter((v) => v.status === "success");
			const urls = successList.map((v) => v.url);
      this.$emit('update:modelValue', this.multiple ? urls : urls.length ? urls[urls.length - 1] : "");
		},
    awaitUpFile(url) {
      return new Promise((resolve, reject) => {
        uploadFile(url, '.png', (url)=> {
          resolve(url)
        })
      })
    },
	},
  watch: {
    modelValue: {
      immediate: true,
      handler(newVal) {
        const urls = this.multiple ? newVal : (!!newVal ? [newVal] : []);

        this.fileList = urls.map((url)=>{
          return {
            url: url,
            name: getFilename(url, false),
            status: this.disabled ? '' : 'success',
            message: ''
          }
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>
